<template>
    <div id="BuySilverCard">
        <div>
            <div class="buyCard_div1">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/card' }">会员卡首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/Cardintroduce', query:{id: this.id} }">{{this.selectCardName}}</el-breadcrumb-item>
                    <el-breadcrumb-item >购买{{this.selectCardName}}</el-breadcrumb-item>
                </el-breadcrumb>
                <el-row >
                    <el-col><p class="buyCard_p1" style="margin-bottom:30px;">易游旅行{{this.selectCardName}}</p></el-col>
                    <el-card  style="margin-top:50px;background-color:#f9f9f9;">
                        <el-form :label-position="labelPosition" label-width="80px" :model="productForm" :rules="rules" ref="productForm">
                            <el-form-item label="开通账号:" :label-width="formLabelWidth" >
                                <p>{{this.loginName}}</p>
                            </el-form-item>
                            <el-form-item label="会员卡名称" :label-width="formLabelWidth" >
                                <el-input v-model="productForm.cardName" autocomplete="off"  v-text="this.selectCardName" ></el-input>
                            </el-form-item>
                            <el-form-item label="购买时长" :label-width="formLabelWidth" prop="purchaseMonth">
                                <el-col :span="3"  :class=borderStyle  v-for="item in selectgetCardDetails" :ref="`lvyou${item.id}`" :key="item.id"  @click.native="colClick(item.id,item.price,item.purchaseMonth)">
                                    <el-col v-model="productForm.cardPrice"><p class="buyCard_pcont1">{{item.price}}元</p></el-col>
                                    <el-col v-model="productForm.purchaseMonth"><p class="buyCard_pcont2">{{item.purchaseMonth}}个月</p></el-col>
                                </el-col>
                                <el-col :span="3"  :class=borderStyle ref="aa" @click.native="col2Click">
                                    <el-col ><p class="buyCard_pcont1" v-text="this.num*this.getPrice+'元'"></p></el-col>
                                    <template>
                                        <el-input-number v-model="num"  :min="1" :max="60" label="描述文字" style="margin-top:30px;width:130px;"></el-input-number>
                                    </template>
                                </el-col>
                            </el-form-item>
                            <el-form-item :label-width="formLabelWidth" >
                                <img :src="'http://127.0.0.1:8082/getImageById?id=' + this.coverId " class="buyCard_img_1">
                                <img :src="'http://127.0.0.1:8082/getImageById?id=' + this.coverId " class="buyCard_img_1">
                           </el-form-item>
                        </el-form>
                            <el-col :push="12"><el-button type="primary" @click="saveCardRecord('productForm')">确 定 购 买</el-button></el-col>
                    </el-card>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
const axios = require('axios');
export default {
    name:'BuySilverCard',
    data(){
        //购买时选择时长不能为空
        var purchaseMonth = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请选择购买期限'));
            } 
            else {
                callback();
            }
        };
        return{
            userName:"", //存放用户名称
            userList:[], //接受用户数据集合
            loginName:'', //接受头部请求中的用户账号
            userId:'', //接受头部请求中的用户id
            coverId:'', //存放图片id
            getPrice:'', //自定义选择存放价钱
            id:'', //存放会员id
            borderStyle:"borderStyle",//绑定动态获取样式
            refa:'',//选中月份框绑定ref名称
            selectgetCardDetails:[],//查询会员卡详情结果集合
            num: 1, //自选月份按钮默认值
            MemberOverdueList:[],//会员卡是否过期结果集合
            selectexpiredId:'',//会员卡是否过期id
            price:"",//价钱赋值
            labelPosition: 'right',//表单右对齐
            formLabelWidth: '120px',
            cardNameList:[],//会员卡信息结果集合
            selectCardId:'',//会员卡id
            selectCardName:'',//会员卡名称
            productForm:{
                id:'', //会员卡id
                cardName:'', //会员卡名称
                cardLevel:'',//会员卡等级
                purchaseMonth:'',//购买会员月份数
                userName:'',//用户账号
                cardId:'',//会员卡id
                userId:'',//用户id
                cardPrice:'',
                expiredId:'',//是否过期0正常1过期
                loginName:'',//用户账号
            },
            //购买校验规则
            rules:{
                purchaseMonth :[
                    {validator: purchaseMonth, trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        //选中购买月份赋值并出现选中效果（1月，4月，12月循环框）
        colClick(id,price,purchaseMonth){
            this.productForm.purchaseMonth=purchaseMonth
            this.productForm.cardPrice=price
            this.refa = "lvyou"+id
            this.selectgetCardDetails.forEach((item) => {
                if(item.id===id){
                    this.$refs[this.refa][0].$el.style.border='1px solid blue'
                }
                else{
                    this.$refs["lvyou"+item.id][0].$el.style.border=''
                     this.$refs.aa.$el.style.border=''
                }
            })
            
        },
        //选中购买月份赋值并出现选中效果（自选月份框）
        col2Click(){
            this.productForm.cardPrice=this.num*this.getPrice
            this.productForm.purchaseMonth=this.num
            this.$refs.aa.$el.style.border='1px solid blue'
            if(this.$refs[this.refa]===undefined){
                return 
            }
            this.$refs[this.refa][0].$el.style.border=''
           
        },
        //查询会员卡详情信息
        getCardDetails(){
            this.id = this.$route.query.id
            axios.get("http://127.0.0.1:8082/cardRecord/getCardDetails?cardId=" + this.id).then(res=>{
                this.selectgetCardDetails=res.data.obj
                this.selectgetCardDetails.forEach((aa)=>{
                    if(aa.purchaseMonth === 1){
                        this.getPrice = aa.price
                    }
                    
                })
            }).catch(error => {
                    this.$message.error('默认查询会员卡详细报错！');
            })
        },
        //查询选择的会员卡信息
        getChoiceCard(){
            this.id = this.$route.query.id
            this.loginName = window.sessionStorage.getItem('loginName')
            axios.get("http://127.0.0.1:8082/cardRecord/getChoiceCard?cardId=" + this.id)
                .then(res=>{
                    this.cardNameList=res.data.obj
                    this.cardNameList.forEach((item)=>{
                        this.selectCardName=item.cardName
                        this.selectCardId=item.id
                        this.coverId = item.coverId
                    })
                    this.getUserId()
                }).catch(error => {
                    this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                })
        },
         
        //查询用户id
        getUserId(){
            this.userName = window.sessionStorage.getItem('userName')
            this.userId = window.sessionStorage.getItem('id')
            this.getMemberOverdue()
        },
        //查询该用户会员是否过期
        getMemberOverdue(){
            axios.get("http://127.0.0.1:8082/cardRecord/getMemberOverdue?userId="+ this.userId +"&cardId=" + this.selectCardId)
                .then(res=>{
                    this.MemberOverdueList=res.data.obj
                    this.MemberOverdueList.forEach((item)=>{
                        this.selectexpiredId=item.expiredId
                    })
                    if(this.selectexpiredId===1){
                        this.selectexpiredId=''
                    }
                }).catch(error => {
                    this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                })
        },
        //购买会员卡方法
        saveCardRecord(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var formdata = new FormData();
                    formdata.set("userId",this.userId)
                    formdata.set("userName",this.userName)
                    formdata.set("cardName",this.selectCardName)
                    formdata.set("cardId",this.selectCardId)
                    formdata.set("purchaseMonth",this.productForm.purchaseMonth)
                    formdata.set("cardPrice",this.productForm.cardPrice)
                    formdata.set("expiredId",this.selectexpiredId)
                    formdata.set("loginName",this.loginName)
                    axios.post("http://127.0.0.1:8082/cardRecord/saveCardRecord",formdata).
                        then(res => {
                            if(res.data.obj>0){
                                this.message("恭喜你，购买会员成功！","success")
                                this.dialogFormVisible = false
                                this.price=''
                                this.productForm={
                                    id:'', //会员卡id
                                    cardName:'', //会员卡名称
                                    cardLevel:'',//会员卡等级
                                    cardPrice:'', //会员卡价格
                                    purchaseMonth:'',//购买会员月份数
                                    userName:'',//用户账号
                                    purchaseMonth:''
                                }
                                //清空选中样式
                                this.$refs.aa.$el.style.border=''
                                if(this.$refs[this.refa]===undefined){
                                    return 
                                }
                                this.$refs[this.refa][0].$el.style.border=''
                            }else{
                                this.message("对不起，保存失败！","warning")
                            }
                        }).catch(error => {
                            this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                    })
                }else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //消息提示框
        message(message,type){
            this.$message({
                message:message,
                type: type
            });
        },
    },
    mounted(){
        this.getChoiceCard()//默认查询会员卡信息
        this.getCardDetails()//查询会员卡详情
    },
}
</script>

<style scoped>
.borderStyle{
    border: 1px solid #e8e8e8;background-color:#fff;margin-left:20px;
}
.buyCard_div1{
    margin:0 auto;
    width:1200px;
    height:800px;
    margin-top:30px;
}
.box-card {
    width: 320px;   
}
.buyCard_img_1{
    width:122px;
    height:66px;
    margin-left:20px;
}
.buyCard_pcont1{
    font-weight:bold;
    font-size:30px;
    margin-top:20px;
    text-align: center;
}
.buyCard_pcont2{
    border-top: 1px dashed #d1cbcb;
    margin-top:30px;
    font-size:16px;
    text-align: center;
}
.buyCard_p1{
    font-size:22px;
    font-weight: bold;
    color:#0166cc;
    margin-top:50px;
}
</style>